<template xmlns:margin="http://www.w3.org/1999/xhtml">
  <el-container>
    <vHeadSpace />
    <el-container>
      <vAsideSpace />
      <el-container>
        <el-main class="hostSetting_main">
          <div  class="hostSetting_content" v-loading="isLoading">
            <!--  上面搜索栏-->
            <div class="basic-search">
              <el-row class="basic-top-serach">
                <div style="float:left;margin-right: 10px"><!--align="center"-->
                  <label style="margin-right: 1px">当前展示的设备为：</label>
                  <el-select v-model="currentHost" placeholder="选择展示基本信息的设备" @change="selectchange($event)">
                    <el-option
                            v-for="item in hosts"
                            :key="item.hostid"
                            :label="item.host"
                            :value="item.hostid">
                      <span style="float: left">{{ item.host }}</span>
                      <div v-if="item.available==1||item.snmp_available==1">
                        <span style="float: right; color: #8492a6; font-size: 13px">可用</span>
                      </div>
                      <div v-else>
                        <span style="float: right; color: #8492a6; font-size: 13px">不可用</span>
                      </div>
                    </el-option>
                  </el-select>
                </div>
                <div style="float:left">
<!--                  <el-button type="primary" icon="el-icon-search" @click="getInfo()">搜索</el-button>-->
                  <el-button type="primary" icon="el-icon-search" @click="backTomonitorOverview()">返回</el-button>
                </div>
              </el-row>
            </div>
            <!--  下面展示栏1-->
            <div id="leftdiv1" class="basic" style="padding-top: 0px">
              <div class="basic-top">
                <el-card class="box-card basic-top-left" style="padding-top: 0px">
                  <div style="height:25px;border-bottom:solid #dddddd 1px; margin-bottom: 10px">
                    <span style="color: #99a9bf;font-family: Apple">基本监控项</span>
                  </div>
                  <div style="padding: 10px;height:260px;overflow-y: auto">
                    <span>  设备名称：</span>
                    <span style="color: #0d47a1"> {{ this.currenthostname }}</span><br>
                    <span style="width: 100px">  状态：</span> <span style="color: #0d47a1">  {{ this.isAvailableFlag }}</span><br>
                    <span style="width: 100px">  IP地址：</span> <span style="color: #0d47a1">  {{ this.IP }}</span><br>

                    <div>
                      <div v-if="currentHostOperatingSystem != ''">
                        <span style="width: 100px">  操作系统型号:</span><span style="color: #0d47a1">  {{
                    this.currentHostOperatingSystem
                  }}</span>
                      </div>
                      <div v-else>
                        <span style="width: 100px">  操作系统型号:</span><span style="color: #0d47a1">
                        正在初始化...
                      </span><br>
                      </div>
                    </div>
                    <span style="width: 100px">  内存容量:</span><span
                          style="color: #0d47a1">  {{ parseFloat(this.currentTotalMemoryLeft).toFixed(2) }} GB</span><br>
                    <span style="width: 100px">  磁盘容量:</span><span
                          style="color: #0d47a1">  {{ parseFloat(this.currentTotaldisc).toFixed(2) }}  GB</span><br>
                    <div>
                      <div v-if="currentHostOperatingSystem.indexOf('Linux') != -1"><span  style="width: 100px">  启动时间:</span><span style="color: #0d47a1">  {{
                        this.currentHostBootTime
                      }}</span>
                      </div>
                      <div v-if="currentHostOperatingSystem.indexOf('Windows') != -1">
                        <span  style="width: 100px">  启动时间:</span><span style="color: #0d47a1">  {{
                        this.currentRunTime
                      }}</span>
                      </div>
                      <div v-if="currentHostOperatingSystem == ''">
                        <span  style="width: 100px">  启动时间:</span><span style="color: #0d47a1">
                        正在初始化...
                      </span>
                      </div>
                    </div>
                    <span style="width: 100px">  交换空间:</span><span style="color: #0d47a1">  {{
                    this.currentHostSwapSpace
                  }}  GB</span><br>
                  </div>
                </el-card>
                <el-card class="box-card basic-top-right">
                  <!--          <div style="float:left;padding-top:20px;width: 40%">-->
                  <!--            <el-table-->
                  <!--                :data="tablenumData"-->
                  <!--                style="width: 98%; align-content: center;border-radius:8px;">-->
                  <!--              <el-table-column prop="itemname" label="监控项" width="180" align="center"></el-table-column>-->
                  <!--              <el-table-column prop="itemvalue" label="监控值" width="180" align="center"></el-table-column>-->
                  <!--              <el-table-column prop="itemstate" label="数据状态" align="center"></el-table-column>-->
                  <!--            </el-table>-->
                  <!--          </div>-->
                  <div id="pieChartOfDisk" style="width: 100%;height: 270px;padding: 0px"></div>
                </el-card>
              </div>
              <div class="basic-bottom">
                <!--    左边面板1-->
                <div class="basic-bottom-left-one ">
                  <!--          展示cpu负载和使用率-->
                  <el-card class="box-card basic-second-left">
                    <div id="cpu_Load_And_Utilization_Chart" style="width: 100%;height:450px;"></div>
                  </el-card>
                </div>

                <!--    右边面板-->
                <div class="basic-bottom-right">
                  <div style="margin: 0px;padding: 0px">
                    <div class="" style="padding: 0px ;height: 500px">
                      <!--       动态展示的表-->
                      <el-card class="box-card basic-second-right">
                        <div id="Disk_read_Write_date" style="width: 100%;height: 450px"></div>
                      </el-card>
                    </div>
                  </div>
                </div>


              </div>
              <el-card class="box-card basic-down">
                <div>
                  <el-row>
                    <div style="float: left;margin-right: 10px">
                      <label> 监控项：</label>
                      <el-select
                              v-model="currentchooseitems"
                              multiple
                              filterable
                              remote
                              reserve-keyword
                              placeholder="请输入要展示的监控项"
                              :loading="loading"
                              style="width: 700px">
                        <el-option
                                v-for="item in chooseitems"
                                :key="item.itemid"
                                :label="item.name"
                                :value="item.itemid">
                        </el-option>
                      </el-select>

                    </div>
                    <div style="float: left">
                      <el-button type="primary" icon="el-icon-search" @click="getchooseItems()">查看</el-button>
                    </div>
                  </el-row>
                  <el-table
                          v-loading="pictLoading"
                          :data="chooseitemstableData"
                          style="width: 100%"
                          element-loading-text="数据正在加载中"
                  >
                    <!--prop:对应对象中的键名；label：定义表格中的列名-->
                    <!--max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条-->
                    <el-table-column width="200px" align="center" prop="sequence" label="序号">
                      <template slot-scope="scope">
                        {{ (currentPage - 1) * pageNum + scope.$index + 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column min-width="180px" align="center" prop="name" label="内容"/>
                    <el-table-column align="center" width="400px" prop="lastclock" label="时间"/>
                    <el-table-column align="center" classwidth="300px" prop="lastvalue" label="最新数据"/>
                    <!--            <el-table-column width="200px" align="center" label="图形">-->
                    <!--              <template slot-scope="scope">-->
                    <!--                <el-button type="text" ref="pic" id="pic" prop="pict" @click="showchartByItemID(scope.row)">图形-->
                    <!--                </el-button>-->
                    <!--              </template>-->
                    <!--            </el-table-column>-->
                    <!--            <el-table-column-->
                    <!--                :key="index"-->
                    <!--                label="图形"-->
                    <!--                align="center"-->
                    <!--            >-->
                    <!--              <template slot-scope="scope">-->
                    <!--                <el-button v-show="item.chaKan" @click="showchartByItemID(scope.row)" type="text" size="small">查看</el-button>-->
                    <!--              </template>-->
                    <!--            </el-table-column>-->

                  </el-table>
                  <!--分页控件-->
                  <el-pagination
                          class="basic_pagination"
                          :current-page="currentPage"
                          :page-sizes="[10,15,20,30,40]"
                          :page-size="100"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="totalNum"
                          @size-change="chooseSizeChange"
                          @current-change="chooseCurrentChange"
                  />
                </div>
              </el-card>
            </div>
            <!--下面展示栏2-->
            <div id="leftdiv2" class="basic" style="height:900px">
              <div class="snmp-basic-top">
                <el-card class="box-card" style="padding-top: 8px">
                  <div class="snmp-basic-top-left">
                    <div style="height:25px;border-bottom:solid #dddddd 1px; margin-bottom: 10px">
                      <span style="color: #99a9bf;font-family: Apple">基本监控项</span>
                    </div>
                    <div style="padding: 10px;height:260px">
                      <span>  设备名称：</span>
                      <span style="color: #0d47a1"> {{ this.currenthostname }}</span>
                      <br>
                      <span style="width: 100px">  产品型号：</span> <span
                            style="color: #0d47a1">   {{ this.entPhysicalDescr }}</span><br>
                      <span style="width: 100px">  IP地址：</span> <span style="color: #0d47a1">   {{ this.IP }}</span><br>
                      <!--            <span style="width: 100px">  运行时间:</span><span style="color: #0d47a1">   {{ this.sysUpTime }}</span><br>-->
                      <span style="width: 100px">  序列号:</span><span style="color: #0d47a1">   {{
                      this.entPhysicalSerialNum
                    }}</span><br>
                      <!--            <span style="width: 100px">  MAC地址:</span><span style="color: #0d47a1">    {{  this.hwStackSystemMac }} </span><br>-->
                      <span style="width: 100px">  系统硬件版本:</span><span style="color: #0d47a1">   {{
                      this.SNMHardwareversion
                    }}</span><br>
                      <span style="width: 100px">  系统软件版本:</span><span style="color: #0d47a1">   {{
                      this.entPhysicalSoftwareRev
                    }}</span><br>
                      <!--            <span style="width: 100px">  当前运行补丁:</span><span style="color: #0d47a1">   {{  this.hwPatchVersion  }}</span><br>-->
                    </div>
                  </div>
                  <div class="snmp-basic-top-right">

                    <table class="table_port_info el-table el-table--fit table-detail">
                      <tr>
                        <th>CPU占用率</th>
                        <th>内存占用率</th>
                        <th>温度</th>
                      </tr>
                      <tr>
                        <td>
                          <el-progress type="circle" :percentage="parseFloat(this.SNMPCPUutilization)||0"></el-progress>
                        </td>
                        <td>
                          <el-progress type="circle" :percentage="parseFloat(this.SNMPMemoryutilion)||0"></el-progress>
                        </td>
                        <td>
                          <el-progress type="circle" :percentage="parseFloat(this.SNMPTemperature)||0" :format="temperatureFormat"></el-progress>
                        </td>
                      </tr>
                    </table>
                  </div>
                </el-card>
                <div style="padding-top: 10px">
                  <el-card class="box-card">
                    <div style="padding: 10px">
                      <table class="table_port_info el-table el-table--fit table-detail">
                        <thead>
                        <tr>
                          <th>接口名称</th>
                          <th style="width: 138px">
                            端口状态:<span style="width: 80px"><el-select size="small" v-model="currentPortState"
                                                                      placeholder="请选择端口状态">
                      <el-option
                              v-for="item in portStates"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                      </el-option>
                    </el-select></span>

                            <!--                <th>  状态-->

                            <!--                  <el-table-column prop="tag" label="状态" width="100"-->
                            <!--                                   :filters="[{ text: '开启', value: '开启' }, { text: '关闭', value: '关闭' }, { text: '未知', value: '未知' }, { text: '休眠', value: '休眠' },{ text: '无此监控项', value: '无此监控项' }, { text: '不存在', value: '不存在' }, { text: '底层关闭', value: '底层关闭' }]"-->
                            <!--                                   :filter-method="stateFilter">-->
                            <!--                    >-->
                            <!--                    <template slot-scope="scope">-->
                            <!--                      <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}-->
                            <!--                      </el-tag>-->
                            <!--                    </template>-->
                            <!--                  </el-table-column>-->

                            <!--                </th>-->
                          <th style="width: 90px">速率</th>
                          <th style="width: 150px">监控项</th>
                          <th>入口方向</th>
                          <th style="width: 300px">出口方向</th>
                        </tr>
                        </thead>


                        <tbody>
                        <tr v-for="(item, index) in realDataList" :key="index">
                          <!--                端口号-->
                          <td v-text="item[0]"></td>
                          <!--                状态-->
                          <td class="diyFont" style="width: 125px">{{ item[1].status }}</td>
                          <!--速率-->
                          <td style="width: 120px">{{ ((item[1].speed) / 1000000000).toFixed(2) }}G/S</td>
                          <!--                各种率-->
                          <td style="width: 130px" id="testTable">
                            <div class="diyFont" style="width: 130px">端口错包率:</div>
                            <div class="diyFont" style="width: 130px">端口丢包率:</div>
                            <div class="diyFont" style="width: 130px">宽带利用率:</div>
                          </td>
                          <td>
                            <div style="margin: 5px 5px 5px;width: 250px">
                              <el-progress :text-inside="false" :stroke-width="15" :color="customColors"
                                           :percentage="parseFloat((parseFloat(item[1].Inboundpacketswitherrors)*100).toFixed(2))"></el-progress>
                            </div>
                            <div style="margin: 5px ;width: 250px">
                              <el-progress :text-inside="false" :stroke-width="15" :color="customColors"
                                           :percentage="parseFloat((parseFloat(item[1].Inboundpacketsdiscarded)*100).toFixed(2))"></el-progress>
                            </div>
                            <div style="margin: 5px;width: 250px">
                              <el-progress :text-inside="false" :stroke-width="15" :color="customColors"
                                           :percentage="parseFloat((parseFloat(item[1].Bitsreceived)*100).toFixed(2))"></el-progress>
                            </div>
                          </td>
                          <td>
                            <div style="margin: 5px ;width: 250px">
                              <el-progress :text-inside="false" :stroke-width="15" :color="customColors"
                                           :percentage="parseFloat((parseFloat(item[1].Outboundpacketswitherrors)*100).toFixed(2))"></el-progress>
                            </div>
                            <div style="margin: 5px ;width: 250px">
                              <el-progress :text-inside="false" :stroke-width="15" :color="customColors"
                                           :percentage="parseFloat((parseFloat(item[1].Outboundpacketsdiscarded)*100).toFixed(2))"></el-progress>
                            </div>
                            <div style="margin: 5px;width: 250px">
                              <el-progress :text-inside="false" :stroke-width="15" :color="customColors"
                                           :percentage="parseFloat((parseFloat(item[1].Bitssent)*100).toFixed(2))"></el-progress>
                            </div>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </el-main>
        <vFootSpace/>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'

import table from "@/mixins/table";

export default {
  name: "BasicMonitoring",
  data() {
    return {

      temDateMap: {},
      realDataList: {},
      currentPortState: '',
      portStates: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '开启'
      }, {
        value: '2',
        label: '关闭'
      }, {
        value: '3',
        label: '未知'
      }, {
        value: '4',
        label: '休眠'
      }, {
        value: '5',
        label: '不存在'
      }, {
        value: '6',
        label: '底层关闭'
      }, {
        value: '7',
        label: '无监控端口的监控项'
      },
      ],


      isLoading:false,  //请求加载
      entPhysicalSerialNum: " ",//序列号
      entPhysicalDescr: " ",//设备型号
      currentTotalMemoryLeft: " ",//基本信息展示的内存容量
      currentRunTime: " ", //当前主机的运行时间
      currentHostBootTime: " ",//当前主机的启动时间
      currentHostOperatingSystem: " ",//当前主机的操作系统信息
      currentHostSwapSpace: " ",//当前主机的交换空间
      currentTotaldisc: 0,//当前主机的总磁盘容量
      currentUseddisc: 0,//当前主机已使用的磁盘容量
      currentTotalMemory: 0,//当前主机的总内存容量
      basicalinfomap: new Map,
      hostAndAvailable: new Map,
      currenthostname: '',//当前主机名
      IP: '',//主机IP


      isAvailableFlag: " ",
      // notAvailableFlag:0,
      loading: false,//选择框里的加载标签
      currentchooseitems: [],//当前选择的要展示的监控项信息
      chooseitems: [],//供选择的要展示的监控项们
      pictLoading: false,//可选监控下项加载标签
      chooseitemstableData: [],//表格里展示的可选监控项
      currentPage: 1,//当前页码
      pageNum: 10, // 每页展示多少数据
      totalNum: 0,//可选监控项总个数
      availabe: "可用",//agent可用性
      isExitGetCPUutilization: "无数据",
      isExitGetCPUload: "无数据",
      isExitGetDiskIOOfRead: "无数据",
      isExitGetDiskIOOfWrite: "无数据",
      isExitGetdisc: '无数据',
      isExitGetMemory: '无数据',
      realDataresult: [], //用来存储点击搜索按钮后的数据
      lastCpuLoadValue: 0,//最后的CPU负载实时
      lastCpuutilization: 0,//最后的CPU利用率实时
      CPUutilization: [],//20个CPU利用率
      diskIoReadrate: [],//获取磁盘读
      diskIoWriterate: [],//获取磁盘写
      CPUload: [],//20个CPU负载
      hosts: [],//当前在线主机
      currentHost: '', // 当前选择的主机
      charts: '',
      temp: '数据正常',
      currentdiscutilization: 0, //磁盘利用率
      currentMemoryutilization: 0,//内存利用率
      tablenumData: [{  //进程数量，网络冲突数，设备中断数的表格数据
        itemname: '进程数量',
        itemvalue: 0,
        itemstate: '不正常'
      }, {
        itemname: '网络冲突数',
        itemvalue: 0,
        itemstate: '不正常'
      }, {
        itemname: '设备中断数',
        itemvalue: 0,
        itemstate: '不正常'
      }],

      /*-------------------------*/

      // hwPatchVersion: "",
      // sysUpTime:"",
      // hwStackSystemMac:"",
      entPhysicalSoftwareRev: "",//SNMP系统软件版本
      SNMPCPUutilization: "",//SNMP设备的CPU利用率
      SNMPMemoryutilion: "",//SNMP设备的内存利用率
      SNMPTemperature: "",//SNMP温度
      SNMHardwareversion: "",//SNMP系统硬件版本

      ports: "",
      currentSNMPPort: '',
      entitySerialNum: '',
      cpu_load: 0,
      mpu_load: 0,
      MAC: '',
      inbound_packets_discarded: 0,
      inbound_packets_with_errors: 0,
      Bits_received: 0,
      Outbound_packets_discarded: 0,
      Outbound_packets_with_errors: 0,
      Bits_sent: 0,
      portState: '',
      temperature: '',

      customColors: [
        {color: '#2ccd08', percentage: 31},
        {color: '#f8d107', percentage: 61},
        {color: '#e80606', percentage: 80},
      ],
      /*---------------*/
    }

  },
  async mounted() {
    await this.getHostList();  //获得在线主机
    this.getbasical();//获取基本信息：主机IP
    this.getInfo();//获取所有信息
  },

  watch: {
    currentPortState: {
      handler(newName, oldName) {
        this.updatePortInfo();
      },
      immediate: true
    },
  },
  /**
   watch: {
    // 不断地监听图表中的数据是否改变
    chartDataDisc(val, oldVal) {
      this.drawPie(val, _this.currentdisc);
    },
    chartDataMemory(Val, oldVal) {
      this.drawPie(_this.currentMemory, Val);
    },

    currentHost: {
      handler(newName, oldName) {
        this.getAllPorts();
      },
      immediate: true
    },


    // 更换端口时会自动更新端口信息
    currentSNMPPort: {
      handler() {
        this.getPortsInfo();
      }
    },
  },
   **/
  methods: {


    // 对snmp信息进行解析再封装
    // packingMapInfo(list) {    //将从前端获得的数据转换为map
    //   const _this = this;
    //   var map = new Map();
    //   // 初始化map 中的内容
    //   map.set('status','无此监控项')
    //   map.set('Inbound packets with errors','0')
    //   map.set('Inbound packets discarded','0')
    //   map.set('Outbound packets with errors','0')
    //   map.set('Outbound packets discarded','0')
    //   map.set('Bits sent','0')
    //   map.set('Bits received','0')
    //   map.set('Speed','0')
    //
    //
    //
    //
    //   // if (list.search('未检测到端口，请配置自动发现规则') !== -1){
    //   //   console.log(list)
    //   //   return map
    //   // }
    //   let typeoflist = typeof list;
    //   if(typeoflist == "string"){
    //     return map;
    //   }else{
    //     // test 交换机返回的 list 是字符串
    //     for (var i = 0; i < list.length; i++) { //讲value中的内容放到map中，key为名称，value为rate
    //       if(list[i].status==undefined){//不是状态那一列，正常取name和rate
    //         // console.log("不是status")
    //         var name = list[i].name;//先取出来name值
    //         var value = list[i].rate;//rate
    //
    //         if (name.search('Inbound packets with errors') !== -1){
    //           console.log("包含Inbound packets with errors")
    //           map.set('Inbound packets with errors',value);//放到map中
    //           // map.set('Inbound packets with errors',list[i].rate)
    //         }else if (name.search('Outbound packets with errors')!==-1){
    //           console.log("包含Outbound packets with errors")
    //           map.set('Outbound packets with errors',value);
    //         }else if (name.search('Inbound packets discarded')!==-1){
    //           console.log("包含Inbound packets discarded")
    //           map.set('Inbound packets discarded',value);
    //         }else if (name.search('Outbound packets discarded')!==-1){
    //           console.log("包含Outbound packets discarded")
    //           map.set('Outbound packets discarded',value);
    //         }else if (name.search('Bits received')!==-1){
    //           console.log("包含Bits received")
    //           map.set('Bits received',value);
    //         }else if (name.search(' Bits sent')!==-1){
    //           console.log("包含 Bits sent")
    //           map.set('Bits sent',value);
    //         }else if (name.search('Speed')!==-1){
    //           console.log("包含Speed")
    //           map.set('Speed',list[i].lastvalue);//速度这一个值未经过计算，直接展示lastvalue值
    //         }
    //
    //       }else{//放入status的值
    //         // console.log(list[i].status)
    //         map.set("status",list[i].status)
    //       }
    //
    //       // var name = list[i].name;//先取出来name值
    //       //
    //       // if (name.search('status') !== -1){
    //       //   map.set('status',list[i].status)
    //       // }
    //       // else if (name.search('Inbound packets with errors') !== -1){
    //       //
    //       //   map.set('Inbound packets with errors',list[i].rate)
    //       // }
    //       // else if (name.search('Inbound packets discarded') !== -1){
    //       //   map.set('Inbound packets discarded',list[i].rate)
    //       // }
    //       // else if (name.search('Outbound packets with errors') !== -1){
    //       //   map.set('Outbound packets with errors',list[i].rate)
    //       // }
    //       // else if (name.search('Outbound packets discarded') !== -1){
    //       //   map.set('Outbound packets discarded',list[i].rate)
    //       // }
    //       // else if (name.search('Bits sent') !== -1){
    //       //   console.log('利用率：'+list[i].rate)
    //       //   if (typeof list[i].rate === undefined){
    //       //     list[i].rate = '0'
    //       //   }
    //       //   map.set('Interface Console9/0/0(): Bits sent',list[i].rate)
    //       // }
    //       // else if (name.search('Bits received') !== -1){
    //       //
    //       //   map.set('Interface Console9/0/0(): Bits received',list[i].rate)
    //       // }
    //       // else {
    //       //   map.set(name, list[i].name);
    //       // }
    //     }
    //   }
    //
    //   //循环验证map中是否正确
    //   /*for (let [key, value] of map.entries()) {
    //     console.log(`map.get(${key}) = ${value}`);
    //   }*/
    //   return map;
    // },
    // 将进度条中的内容进行修改
    temperatureFormat(per) {
      return per === 100 ? '温度过高' : `${per}℃`;
    },

    //获取基本信息
    getbasical() {
      const _this = this
      this.hostAndAvailable.get(this.currentHost).name;
      _this.currenthostname = this.hostAndAvailable.get(this.currentHost).host;//给设备名称赋值
      if (_this.hostAndAvailable.get(_this.currentHost).available != 1 && _this.hostAndAvailable.get(_this.currentHost).snmp_available != 1) {
        _this.isAvailableFlag = '不可用'
      } else {
        _this.isAvailableFlag = '可用'
      }
      axios({
        methods: 'get',
        url: '/basical/getIP.action',
        params: {
          hostId: _this.currentHost, // hostId
        }
      }).then((res) => {
        var result = res.data.content.result;
        _this.IP = result[0].ip

      })
    },

    /*
      * 处理各种页面跳转
      *
      * */
    pageJump(url, data) {
      this.$router.push({path: url, query: data})
    },

    // isshowchart(val){
    //   const _this = this;
    //   axios({
    //     methods: 'get',
    //     url: '/basical/getDataByItemID.action',
    //     params: {
    //       itemID: val.itemid, // itemid
    //       hostID: _this.currentHost, // hostId
    //     }
    //   }).then((res) => {
    //     var result = res.data.content.result;
    //     // console.log(result.length)
    //     if (result.length!=0){//有结果可以画图的时候再进行跳转
    //       return true;
    //     }else {
    //       return false;
    //       // val.pic.innerText = "不可绘图"
    //     }
    //   })
    // },

    //展示图形信息
    showchartByItemID(val) {
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/getDataByItemID.action',
        params: {
          itemID: val.itemid, // itemid
          hostID: _this.currentHost, // hostId
        }
      }).then((res) => {
        var result = res.data.content.result;
        // console.log(result.length)
        if (result.length != 0) {//有结果可以画图的时候再进行跳转
          this.pageJump('drawItemCharts', {'hostId': _this.currentHost, 'itemid': val.itemid, 'name': val.name});
        } else {
          // console.log("haha"+val.innerText)
          // val.pic.innerText = "不可绘图"

        }

      })
    },

    // 控制表格每页展示多少数据
    chooseSizeChange(val) {
      this.pageNum = val;
      // console.log(val);
      this.getchooseItems();
    },
    // 控制当前页的转换
    chooseCurrentChange(val) {
      this.currentPage = val;
      this.getchooseItems();
    },
    //可选监控项下拉列表
    getchooseItemslist() {
      const _this = this
      _this.loading = true;
      axios({
        methods: 'get',
        url: '/basical/allItems.action',
        params: {
          hostId: _this.currentHost, // hostId
          curPage: '',
          pageSize: '',
        }
      }).then((res) => {
        _this.pictLoading = false;
        _this.loading = false;
        if (res.data.content.result == null) {
          _this.chooseitems = []
        } else {
          _this.chooseitems = res.data.content.result;
        }
      })
    },

    //可选监控项
    getchooseItems() {
      const _this = this
      _this.pictLoading = true;
      _this.loading = true;
      axios({
        methods: 'get',
        url: '/basical/allItems.action',
        params: {
          hostId: _this.currentHost, // hostId
          curPage: _this.currentPage,
          pageSize: _this.pageNum,
          currentitemids: _this.currentchooseitems.toString(),
        }
      }).then((res) => {
        _this.pictLoading = false;
        _this.loading = false;
        if (res.data.content.result == null) {
          _this.chooseitemstableData = []
        } else {
          let length = res.data.content.result.length
          _this.chooseitemstableData = res.data.content.result.slice(0, length - 1)
          console.log((res.data.content.result));
          _this.totalNum = res.data.content.result[length - 1].data_num;
          // alert(_this.totalNum);
        }
      })
    },

    //获取普通服务器20个CPU负载
    getCPUload() {
      const _this = this;
      let promise
      promise = axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: 'Load average (1m avg)', // 参数名
          type: ''
        }
      })
      return new Promise((resolve, reject) => {
        promise.then(response => {
          if (response.data.content.result.length == 0) {  //如果未找到数据
            _this.CPUload = '';
            _this.isExitGetCPUload = ''
          } else {
            // var res = res.data.content.result;
            _this.isExitGetCPUload = '数据正常'
            _this.CPUload = response.data.content.result;

          }
          resolve(response.data.content.result);
        }).catch(err => {
          reject(err);
        })
      });

    },

    //获取普通服务器20个CPU利用率
    getCpuUtilization() {
      const _this = this;
      let promise
      promise = axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        async: false, // fasle表示同步请求，true表示异步请求
        params: {
          hostId: _this.currentHost, // hostId
          itemName: 'CPU utilization', // 参数名
          type: ''
        }
      })
      return new Promise((resolve, reject) => {
        promise.then(response => {
          if (response.data.content.result.length === 0) {  //如果未找到数据
            _this.isExitGetCPUutilization = '无数据'
            _this.CPUutilization = '';
          } else {
            // var res = res.data.content.result;
            _this.CPUutilization = response.data.content.result;
            _this.isExitGetCPUutilization = '数据正常';

          }
          resolve(response.data.content.result);
        }).catch(err => {
          reject(err);
        })
      });

    },

    // 获取磁盘IO的read数据
    getDiskIOOfRead() {
      var type = '';
      if(this.currentHostOperatingSystem.indexOf('Linux') != -1){
        type = 'Linux'
      }
      const _this = this;
      let promise
      promise = axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        async: false, // fasle表示同步请求，true表示异步请求
        params: {
          hostId: _this.currentHost, // hostId
          itemName: 'Disk read rate', // 参数名磁盘读取率
          type: type //判断Agent类型
        }
      })
      return new Promise((resolve, reject) => {
        promise.then(response => {
          if (response.data.content.result.length == 0) {  //如果未找到数据
            _this.isExitGetDiskIOOfRead = '无数据'
            _this.diskIoReadrate = '';
            // console.log("进入判断11111112111111111111")
          } else {
            _this.diskIoReadrate = response.data.content.result;
            // console.log("进入循环")
            // console.log("Disk read rate:"+_this.diskIoReadrate);
            for (var i = 0; i < _this.diskIoReadrate.length; i++) {
              // console.log("Disk read rate:"+_this.diskIoReadrate[i].value);
            }
            _this.isExitGetDiskIOOfRead = '数据正常';
          }
          resolve(response.data.content.result);
        }).catch(err => {
          reject(err);
        })
      });

    },
    // 获取磁盘IO的Write数据
    getDiskIOOfWrite() {
      var type = '';
      if(this.currentHostOperatingSystem.indexOf('Linux') != -1){
        type = 'Linux'
      }
      const _this = this;
      let promise
      promise = axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        async: false, // fasle表示同步请求，true表示异步请求
        params: {
          hostId: _this.currentHost, // hostId
          itemName: 'Disk write rate', // 参数名磁盘读取率
          type: type
        }
      })
      return new Promise((resolve, reject) => {
        promise.then(response => {
          if (response.data.content.result.length == 0) {  //如果未找到数据
            _this.isExitGetDiskIOOfWrite = '无数据'
            _this.diskIoWriterate = this.diskIoReadrate;

          } else {
            _this.diskIoWriterate = response.data.content.result;
            // console.log("进入循环")
            // console.log("Disk write rate:"+_this.diskIoWriterate);
            for (var i = 0; i < _this.diskIoWriterate.length; i++) {
              // console.log("Disk write rate:"+_this.diskIoWriterate[i].value);
            }
            _this.isExitGetDiskIOOfWrite = '数据正常';
          }
          resolve(response.data.content.result);
        }).catch(err => {
          reject(err);
        })
      });

    },
    //绘制普通服务器折线图
    drawdoublelineChart() {
      const _this = this;
      var data = _this.CPUutilization;//
      var timedata = new Array();//时间
      var utilization = new Array();//利用率
      var load = new Array();//负载
      for (var i = 0; i < data.length; i++) {
        timedata[i] = data[i].clock;
        utilization[i] = parseFloat(data[i].value).toFixed(2);

      }
      var data1 = _this.CPUload;
      for (var i = 0; i < data1.length; i++) {
        load[i] = parseFloat(data1[i].value).toFixed(2);
      }
      this.charts = echarts.init(document.getElementById('cpu_Load_And_Utilization_Chart'))
      this.charts.setOption({
        title: {
          text: 'CPU利用率(' + _this.isExitGetCPUutilization + ')  CPU负载(' + this.isExitGetCPUload + ')',
        },
        tooltip: {
          trigger: 'axis',
          axiosPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          data: ['CPU利用率', 'CPU负载'],
          left: '70%',
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: timedata,
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '利用率',
            max: Math.ceil(Math.max.apply(null, utilization)),
            min: 0,
            boundaryGap: [0.2, 0.2],
            splitNumber: 5,//分割的段数
            interval: Math.ceil(Math.max.apply(null, utilization)) / 5//分割的间隔
          },
          {
            type: 'value',
            scale: true,
            name: '负载',
            max: Math.ceil(Math.max.apply(null, load)),
            min: 0,
            boundaryGap: [0.2, 0.2],
            splitNumber: 5,//分割的段数
            interval: Math.ceil(Math.max.apply(null, load)) / 5//分割的间隔
          },
        ],
        series: [
          {
            name: 'CPU利用率',
            type: 'line',
            // stack: '总量',
            data: utilization,
            color: "#6699CC"
          },
          {
            name: 'CPU负载',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 1,
            // stack: '总量',
            data: load,
            color: "#339933"
          }
        ]
      })
    },
    //绘制磁盘IO双折线图
    drawIolineChart() {
      const _this = this;
      var dataW = _this.diskIoWriterate;
      var dataR = _this.diskIoReadrate;
      var timedata = new Array();//时间
      var WriteData = new Array();//磁盘IO写入速率
      var ReadData = new Array();//磁盘IO读取速率
      // if(dataW.length==0){
      //   for (var j=0;j<20;j++){
      //     WriteData[j]=j;
      //     ReadData[j]=j+1;
      //     timedata[j]=j+2;
      //   }
      // }else {
        for (var i = 0; i < dataW.length; i++) {
          timedata[i] = dataW[i].clock;
          WriteData[i] = dataW[i].value;
        }

        for (var j = 0; j < dataR.length; j++) {
          ReadData[j] = dataR[j].value;
        }
      // }

      this.charts = echarts.init(document.getElementById('Disk_read_Write_date'))
      this.charts.setOption({
        title: {
          text: '磁盘写入率(' + this.isExitGetDiskIOOfWrite + ')' + "  " + '读取率(' + this.isExitGetDiskIOOfRead + ')',
        },
        tooltip: {
          trigger: 'axis',
          axiosPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          data: ['写入率(Bytes/s)', '读取率(Bytes/s)'],
          left: '65%',
        },
        grid: {
          left: '6%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: timedata,
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '写入率(Bytes/s)',
            max: Math.ceil(Math.max.apply(null, WriteData)),
            min: 0,
            boundaryGap: [0.2, 0.2],
            splitNumber: 5,//分割的段数
            interval: Math.ceil(Math.max.apply(null, WriteData)) / 5//分割的间隔
          },
          {
            type: 'value',
            scale: true,
            name: '读取率(Bytes/s)',
            max: Math.ceil(Math.max.apply(null, ReadData)),
            min: 0,
            // boundaryGap: [0.2, 0.2],
            splitNumber: 5,//分割的段数
            interval: Math.ceil(Math.max.apply(null, ReadData)) / 5//分割的间隔
          },
        ],
        series: [
          {
            name: '写入率(Bytes/s)',
            type: 'line',
            data: WriteData,
            color: "#6699CC"
          },
          {
            name: '读取率(Bytes/s)',
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 1,
            data: ReadData,
            color: "#339933"
          }
        ]
      })
    },

    //绘制CPU和内存的饼状图
    drawPie(val,valutilization, Val,Valutilization) {//参数分别为：磁盘总容量，磁盘利用率，内存总容量，内存利用率
      const _this = this;
      this.charts = echarts.init(document.getElementById('pieChartOfDisk'))
      this.charts.setOption({
        title: [{
          text: '磁盘容量(共' + parseFloat(val).toFixed(2) + 'GB)',
          subtext: this.isExitGetdisc,
          left: '26%',
          top: '2%',
          textAlign: 'center'
        },
          {
            text: '内存容量(共' + parseFloat(Val).toFixed(2) + 'GB)',
            left: '72%',
            subtext: this.isExitGetMemory,
            top: '2%',
            textAlign: 'center',
          }],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}' +' GB'+ '\n' + ' ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '占总容量百分比',
            type: 'pie',
            radius: '70%',//饼的大小
            center: ['26%', '64%'],//饼的横纵坐标
            data: [
              {
                value: parseFloat(parseFloat(val).toFixed(2) * valutilization).toFixed(2),
                name: '已使用容量',
                itemStyle: {color: '#CCCCCC'}
              },
              {
                value: parseFloat(parseFloat(val).toFixed(2) * (1 - valutilization)).toFixed(2),
                name: '剩余容量',
                itemStyle: {color: '#2e7d32'}
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :{c}' +' GB'+ '\n' + ' ({d}%)',
                },
                labelLine: {show: true}
              },
            },
            emphasis: {

              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'

            }
          },
          {
            name: '占总容量百分比',
            type: 'pie',
            radius: '70%',
            center: ['72%', '64%'],
            data: [
              {
                value: parseFloat(parseFloat(Val).toFixed(2) * (Valutilization*0.01) ).toFixed(2),
                name: '已使用容量',
                itemStyle: {color: '#CCCCCC'}
              },
              {
                value: parseFloat(parseFloat(Val).toFixed(2) * (1 - Valutilization*0.01)).toFixed(2),
                name: '剩余容量',
                itemStyle: {color: '#2e7d32'}
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :{c}' + ' GB' + ' ({d}%)',
                },
                labelLine: {show: true}
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'

            }
          }
        ]
      })
    },


    //给表格赋值实时数据
    realdatavalusetotable(num, value) {
      const _this = this;
      if (value == '') {
        _this.tablenumData[num].itemvalue = 0;
        _this.tablenumData[num].itemstate = "无该监控项";
      } else {
        _this.tablenumData[num].itemvalue = parseInt(value);
        _this.tablenumData[num].itemstate = "正常";
      }
    },

    async getrealvalue(list) {    //将从前端获得的数据转换为map
      const _this = this;
      var map = new Map();
      for (var i = 0; i < list.length; i++) {
        if ( i == 0) {
          _this.currentHostOperatingSystem = list[0].Systemdescription
        }
        if (list[i].length != 0) {
          var name = list[i].name;
          map.set(name, list[i].lastvalue);
        }

      }
      return map;
    },

    // async getsnmpvalue( list) {    //将从前端获得的snmp基本信息数据转换为map
    //   const _this = this;
    //   var map = new Map();
    //   map.set('Temperature','0');
    //   map.set('Hardware serial number','0');
    //   map.set('Operating system','0');
    //   map.set('Hardware model name','0');
    //   map.set('CPU utilization','0');
    //   map.set('Memory utilization','0');
    //   map.set('Hardware version','0');
    //
    //   for (var i = 0; i < list.length; i++) {
    //     if(list[i].length!=0){
    //       var name = list[i].name;
    //       var value = list[i].lastvalue;
    //       // name = name.replace(/\s/g,"");
    //       map.set(name, list[i].lastvalue);
    //       if (name.search('Temperature') !== -1){
    //         map.set('Temperature',value);//将温度放到map
    //       } else if (name.search('Hardware serial number') !== -1){
    //         map.set('Hardware serial number',value);//将温度放到map
    //       } else if (name.search('Operating system') !== -1){
    //         map.set('Operating system',value);//将温度放到map
    //       } else if (name.search('Hardware model name') !== -1){
    //         map.set('Hardware model name',value);//将温度放到map
    //       } else if (name.search('CPU utilization') !== -1){
    //         map.set('CPU utilization',value);//将温度放到map
    //       } else if (name.search('Memory utilization') !== -1){
    //         map.set('Memory utilization',value);//将温度放到map
    //       } else if (name.search('Hardware version') !== -1){
    //         map.set('Hardware version',value);//将温度放到map
    //       }
    //     }
    //   }
    //   return map;
    // },
    //有主机存在时调用，且点击按钮也触发该方法，先判断主机是什么服务器，再判断是否可用
    async getInfo() {
      const _this = this;
      var div1 = document.getElementById("leftdiv1");//保存第一个普通服务器页面
      var div2 = document.getElementById("leftdiv2");//保存第二个SNMP页面
      div2.style.display = "none";//隐藏第二个页面
      await axios({
        methods: 'get',
        url: '/basical/agentRealData.action',
        async: false, //表示同步
        params: {
          hostId: _this.currentHost, //当前hostid
        }
      }).then((res) => {
        var result = res.data.content.result;
        console.log(result);
        var isSNMPflag = result[0].deviceType;
        if (isSNMPflag == 1) { //普通服务器设备
          // _this.currentHostOperatingSystem = result.shift().Systemdescription
          _this.getbasical();
          div1.style.display = "block";  //面板变换,第一个页面展示，
          div2.style.display = "none";//第二个页面隐藏
          //判断主机是否可用
          if (_this.hostAndAvailable.get(_this.currentHost).available != 1 && _this.hostAndAvailable.get(_this.currentHost).snmp_available != 1) { //主机不可用，绘空图
            //给单个实时数据赋值
            _this.getrealvalue(result).then((result => {
              _this.currentRunTime = result.get("Uptime");//获取运行时间
              _this.currentHostBootTime = result.get("System boot time");//获取运行时间
              _this.currentHostOperatingSystem = result.get("Operating system");//获取操作系统
              _this.currentHostSwapSpace = result.get("Total swap space");//获取交换空间
              _this.currentTotalMemoryLeft = result.get("Total memory");
              _this.currentTotaldisc = result.get("/: Total space");
              _this.currentTotalMemoryLeft = result.get("Total memory") / 1024 / 1024 / 1024;
              _this.currentTotalMemoryLeft = _this.currentTotalMemoryLeft.toFixed(2)
            }))
            //绘制空的磁盘IO口的折线图
            _this.diskIoReadrate = '';
            _this.isExitGetDiskIOOfRead = '无数据'
            _this.diskIoWriterate = '';
            _this.isExitGetDiskIOOfWrite = '无数据'
            _this.drawIolineChart();
            //绘制空的CPU利用率和负载折线图
            _this.CPUutilization = '';
            _this.isExitGetCPUutilization = '无数据'
            _this.CPUload = '';
            _this.isExitGetCPUload = '无数据'
            _this.drawdoublelineChart();//绘制折线图
            //绘制空的扇形图
            _this.currentTotaldisc = 0;//磁盘总容量赋值为0
            _this.currentdiscutilization = 0;//磁盘利用率赋值为0
            _this.isExitGetdisc = '无数据';//磁盘数据赋值为不存在
            _this.currentTotalMemory = 0;//总内存赋值为0
            _this.currentMemoryutilization = 0;//内存利用率赋值为0
            _this.isExitGetMemory = '无数据';//内存数据赋值为不存在
            _this.drawPie(_this.currentTotaldisc,_this.currentdiscutilization,_this.currentTotaldisc, _this.currentMemoryutilization);
            //重新更新可选监控项表格
            _this.currentchooseitems = ''
            _this.getchooseItemslist();
            _this.getchooseItems();
          } else { //主机可用
            //给单个实时数据赋值
            _this.currentTotaldisc = result[0].totalSpace / Math.pow(1024, 3);//给磁盘容量赋值
            if(_this.currentTotaldisc ==0){//如果磁盘容量为0，赋值为无数据
              _this.currentdiscutilization = 0;//磁盘利用率设置为0
              _this.isExitGetdisc = "无数据"//磁盘设为无数据
            }else {
              _this.currentdiscutilization = parseFloat(result[0].usedSpace) / parseFloat(result[0].totalSpace);//计算磁盘利用率
              _this.isExitGetdisc = "数据正常"//磁盘数据正常
            }
            _this.getrealvalue(result).then((result => {
              _this.currentRunTime = result.get("Uptime");//获取运行时间
              _this.currentHostBootTime = result.get("System boot time");//获取运行时间
              // _this.currentHostOperatingSystem = result.get("Operating system");//获取操作系统
              _this.currentHostSwapSpace = (result.get("Total swap space") / Math.pow(1024, 3)).toFixed(2);//获取交换空间
              _this.currentTotalMemory = result.get("Total memory");//获取总内存
              _this.currentTotalMemory = _this.currentTotalMemory / Math.pow(1024, 3);//给总内存转换单位
              _this.currentTotalMemoryLeft= _this.currentTotalMemory.toFixed(2);//赋值到左边的总内存保留两位小数
              if (result.has("Memory utilization")) {//如果内存利用率，给内存利用率赋值
                _this.currentMemoryutilization =result.get("Memory utilization");//给内存利用率赋值,是利用率
                _this.isExitGetMemory = "数据正常"
              } else {
                _this.currentMemoryutilization = 0;//给内存利用率赋值
                _this.isExitGetMemory = "无数据"
              }
              //绘扇形图,传4个参数分别为磁盘总容量，磁盘利用率，内存总容量，内存利用率
              _this.drawPie(_this.currentTotaldisc, _this.currentdiscutilization,_this.currentTotalMemory,_this.currentMemoryutilization);
            }))
            //绘图
            //绘制磁盘IO口的折线图
            _this.getDiskIOOfRead().then(result => {
              _this.getDiskIOOfWrite().then(result => {
                _this.drawIolineChart();
              });
            });
            //绘制CPU利用率和负载双折线图
            _this.getCpuUtilization().then(result => {
              _this.getCPUload().then(result => {
                _this.drawdoublelineChart();
              });
            });

            //可选监控项
            _this.getchooseItemslist();
          }

        } else { //snmp设备

          div2.style.display = "block";  //面板变换
          div1.style.display = "none";
          //获取基本硬件信息
          _this.getSNMPbasic();
          axios({
            method: 'get',
            url: '/Port/get_snmp_information.action',
            params: {
              hostId: _this.currentHost, // SNMPHostId
            }
          }).then(function (response) {
            let resultmap = response.data.content.result
            _this.entPhysicalSerialNum = resultmap.Hardware_serial_number;//序列号
            _this.entPhysicalSoftwareRev = resultmap.Operating_system;//软件版本号
            _this.entPhysicalDescr = resultmap.Hardware_model_name;//产品型号
            _this.SNMPCPUutilization = resultmap.CPU_utilization;//CPU利用率
            _this.SNMPTemperature = resultmap.Temperature;//温度
            _this.SNMPMemoryutilion = resultmap.Memory_utilization;//内存利用率
            _this.SNMHardwareversion = resultmap.Hardware_version;//硬件版本

            /**
             _this.getsnmpvalue( resultList).then((result => {
              if (result.has("hwPatchVersion")){
                _this.hwPatchVersion= result.get("hwPatchVersion");
              }
              if (result.has("sysUpTime")){
                _this.sysUpTime = result.get("sysUpTime");
              }
              if (result.has("entPhysicalSerialNum")){ //序列号
                _this.entPhysicalSerialNum = result.get("entPhysicalSerialNum");
              }
              if (result.has("hwStackSystemMac")){
                _this.hwStackSystemMac = result.get("hwStackSystemMac");
              }
              if (result.has("MPU Board 0: Operating system")){//软件版本号
                _this.entPhysicalSoftwareRev = result.get("MPU Board 0: Operating system");

              }
              if (result.has("Hardware model name")){//产品型号
                _this.entPhysicalDescr = result.get("Hardware model name");
                // console.log("entPhysicalDescr:"+_this.entPhysicalDescr)
              }
              if (result.has("MPU Board 0: CPU utilization")){ //cpu利用率
                _this.SNMPCPUutilization = result.get("MPU Board 0: CPU utilization");
                // console.log("_this.SNMPCPUutilization"+_this.SNMPCPUutilization)
              }
              // console.log("111111111111")
              if (result.has("Temperature")){ //温度
                _this.SNMPTemperature = result.get("Temperature");
                // console.log("_this.SNMPTemperature"+_this.SNMPTemperature)
              }
              // console.log("222222222222")
              if (result.has("MPU Board 0: Memory utilization")){ //内存利用率
                _this.SNMPMemoryutilion = result.get("MPU Board 0: Memory utilization");
                // console.log("_this.SNMPMemoryutilion"+_this.SNMPMemoryutilion)
                // console.log("_this.SNMPTemperature"+_this.SNMPTemperature)
              }

            }))
             **/
          });


          axios({
            method: 'get',
            url: '/Port/get_all_port.action',
            params: {
              hostId: _this.currentHost, // SNMPHostId
            }
          }).then(function (response) {

            let resultList = response.data.result
            _this.temDateMap = resultList;
            _this.realDataList = new Map(Object.entries(resultList));


          });


        }
      })
    },
    selectchange(val){
      this.getInfo(val);
    },
    backTomonitorOverview(){

      this.$router.push({path: '/monitorOverview',query: {'pageNo': this.$route.query.pageNo,'type':this.$route.query.type}})

    },
    //获取SNMP的IP地址和设备名称
    getSNMPbasic() {
      const _this = this
      this.hostAndAvailable.get(this.currentHost).name;
      _this.currenthostname = this.hostAndAvailable.get(this.currentHost).host;//给设备名称赋值
      if (this.hostAndAvailable.get(this.currentHost).available === 1 && this.hostAndAvailable.get(this.currentHost).snmp_available === 1) {
        _this.isAvailableFlag = '可用'
      } else {
        _this.isAvailableFlag = '不可用'
      }
      axios({
        methods: 'get',
        url: '/basical/getIP.action',
        params: {
          hostId: _this.currentHost, // hostId
        }
      }).then((res) => {
        var result = res.data.content.result;
        _this.IP = result[0].ip
      })
    },

    updatePortInfo() {
      const _this = this;
      let tem, temObject;
      temObject = _this.temDateMap
      tem = new Map(Object.entries(temObject));

      if (_this.currentPortState === '0') {
        _this.realDataList = tem
      } else if (_this.currentPortState === '1') {
        let tempMap = new Map();
        for (const [key, value] of Object.entries(temObject)) {
          if (value.status === '开启') {
            tempMap.set(key, value)
          }
        }
        _this.realDataList = tempMap;

      }else if (_this.currentPortState === '2') {
        let tempMap = new Map();
        for (const [key, value] of Object.entries(temObject)) {
          if (value.status === '关闭') {
            tempMap.set(key, value)
          }
        }
        _this.realDataList = tempMap;
      }else if (_this.currentPortState === '3') {
        let tempMap = new Map();
        for (const [key, value] of Object.entries(temObject)) {
          if (value.status === '未知') {
            tempMap.set(key, value)
          }
        }
        _this.realDataList = tempMap;
      }else if (_this.currentPortState === '4') {
        let tempMap = new Map();
        for (const [key, value] of Object.entries(temObject)) {
          if (value.status === '休眠') {
            tempMap.set(key, value)
          }
        }
        _this.realDataList = tempMap;
      }else if (_this.currentPortState === '5') {
        let tempMap = new Map();
        for (const [key, value] of Object.entries(temObject)) {
          if (value.status === '不存在') {
            tempMap.set(key, value)
          }
        }
        _this.realDataList = tempMap;
      }else if (_this.currentPortState === '6') {
        let tempMap = new Map();
        for (const [key, value] of Object.entries(temObject)) {
          if (value.status === '底层关闭') {
            tempMap.set(key, value)
          }
        }
        _this.realDataList = tempMap;
      }else if (_this.currentPortState === '7') {
        let tempMap = new Map();
        for (const [key, value] of Object.entries(temObject)) {
          if (value.status === '无监控端口的监控项') {
            tempMap.set(key, value)
          }
        }
        _this.realDataList = tempMap;
      }

      console.log('端口状态：' + _this.currentPortState)
    },

    getAllPorts() {
      const _this = this;
      axios({
        method: 'get',
        url: '/Port/get_all_port.action',
        params: {
          hostId: _this.currentHost,
        }
      }).then(function (response) {
        let resultList = response.data.content.result
        _this.ports = resultList
      }).catch(function (error) {
        console.log(error)
      })
    },

    getPortsInfo() {
      const _this = this;
      if (_this.currentSNMPPort == '') {
        _this.portnotifyNotExistence("端口号为选择");
      } else {
        axios({
          method: 'get',
          url: '/Port/get_port_info.action',
          params: {
            hostId: _this.currentHost,
            applicationid: _this.currentSNMPPort,
          }
        }).then(function (response) {
          let resultList = response.data.content.result
          _this.inbound_packets_discarded = parseFloat((parseFloat(resultList[0].rate) * 100).toFixed(3))
          _this.inbound_packets_with_errors = parseFloat((parseFloat(resultList[1].rate) * 100).toFixed(3))
          _this.Bits_received = parseFloat((parseFloat(resultList[2].rate) * 100).toFixed(3))
          _this.Outbound_packets_discarded = parseFloat((parseFloat(resultList[3].rate) * 100).toFixed(3))
          _this.Outbound_packets_with_errors = parseFloat(((parseFloat(resultList[4].rate)) * 100).toFixed(3))
          _this.Bits_sent = parseFloat((parseFloat(resultList[5].rate) * 100).toFixed(3))
          _this.portState = resultList[7].status
        }).catch(function (error) {
          console.log("getPortsInfo错误" + error)
        })
      }

    },
    //获取在线主机
    getHostList() {
      const _this = this;
      _this.isLoading=true;
      let promise;
      promise = axios({
        method: 'get',
        url: '/monitor/get_avail_all_online_host.action'
      })
      // 返回处理后的promise对象，即字符串形式
      return new Promise((resolve, reject) => {
        promise.then(response => {
          let resultList = response.data.content.result
          for (var i = 0; i < resultList.length; i++) {
            _this.hostAndAvailable.set(resultList[i].hostid, resultList[i]);//将主机状态以map形式存主机id和整个对象
            // console.log("查找map内容："+resultList[i].hostid+"查找当前信息："+resultList[i])
          }

          //这里if判断是为了解决从监控设备总览跳转过来的一个初始化赋值，请后面修改的时候不要直接删了，谢谢
          if (_this.$route.fullPath != '/BasicMonitoring') {
            _this.currentHost = _this.$route.query.hostid
          } else {
            _this.currentHost = resultList[0].hostid
          }
          _this.hosts = resultList
          resolve(response.data.content.result);
          _this.isLoading=false;
        }).catch(err => {
          reject(err);
        })
      });
    },
  }
}


</script>

<style scoped>
  .hostSetting_main {
    padding: 10px;
    height: 92vh;
    width: 100%;
    margin-top: 60px;
  }

  .hostSetting_content{
    margin-top: 0;
    width: 100%;
    height: 97%;
    overflow-y: auto;
  }
.basic {
  width: 100%;
  min-height: 900px;
}


.basic-search {
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding-left: 30px;
}

.basic-top {
  width: 100%;
  height: 350px;
  padding-top: 10px;
}

.snmp-basic-top {
  width: 100%;
  height: 800px;
  padding-top: 10px;
}

.basic-top-left {
  width: 30%;
  height: 330px;
  float: left;
  margin-right: 0.5%;
}

.snmp-basic-top-left {
  width: 30%;
  height: 250px;
  float: left;
}

.basic-top-left span {
  font-family: '微软雅黑 Light';
  font-weight: bold;
  line-height: 30px;
  text-align: left;
}


.basic-top-right {
  width: 69.5%;
  height: 330px;
  float: right;
}

.snmp-basic-top-right {
  width: 70%;
  height: 250px;
  float: right;
}

.basic-bottom {
  width: 100%;
  height: 510px;
  margin-top: 10px;
}

.basic-bottom-left-one {
  float: left;
  width: 45.5%;
  height: 500px;
}

.basic-bottom-left-two {
  float: left;
  width: 45.5%;
  height: 580px;
  float: left;
}

.basic-bottom-right {
  width: 54%;
  height: 500px;
  float: right;
}

.basic-down {
  width: 100%;
  min-height: 300px
}

.snmp_top {
  width: 100%;
  height: 60px;
  /*line-height: 60px; !* 文字居中  *!*/
  padding-left: 30px;
}

.snmp-basic-top-left span {
  font-family: '微软雅黑 Light';
  font-weight: bold;
  line-height: 30px;
  text-align: left;
}

/*-------------------------------*/

.table_port_info thead tr {
  display: block;
}

.table_port_info tbody {
  display: block;
  height: 200px;
  overflow: auto;
  width: 1200px;
}

.table_port_info th {
  width: 200px;
  text-align: center;
}

.table_port_info td {
  width: 200px;
  text-align: center;
  word-break: break-all;
}

.basic_pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  margin-left: 20rem;
  font-weight: 700;
  /* align-self: center; */
}

.diyFont {
  font-size: medium;
  font-family: 楷体;
}
</style>
